<template>
  <div>
    <Header :title="addressTitle"></Header>

    <van-address-edit
      :area-list="areaList"
      show-delete
      show-set-default
      show-search-result
      :address-info="addressInfo"
      :area-columns-placeholder="['请选择','请选择','请选择']"
      @save="onSave"
      @delete="onDelete"
    ></van-address-edit>
  </div>
</template>

<script setup>
import Header from '@/components/Header'
import {computed, onMounted, reactive, ref} from "vue";
import {useStore} from "vuex";
import {useRoute} from "vue-router";
import {Toast} from "vant";
import router from "@/router";

const areaList = reactive({
  province_list: {
    110000: "广东省",
    120000: "浙江省",
  },
  city_list: {
    110100: "广州市",
    110200: "深圳市",
    120100: "杭州市",
    120200: "宁波市",
  },
  county_list: {
    110101: "天河区",
    110102: "海珠区",
    120102: "上城区",
    130102: "下城区",
  }
})

const store = useStore()
const route = useRoute()
let addressInfo = ref({})

let addressTitle = computed(() => {
  return route.query.type === 'edit' ? '地址编辑' : '地址新增'
})
const init = () => {
  store.state.userAddress.forEach(item => {
    if(item.id === Number(route.query.id)){
      addressInfo.value = item
    }
  })

  console.log('addressInfo',addressInfo.value)
}

const onSave = (content) => {
  console.log('type',route.query.type)
  if(route.query.type === 'edit'){
    store.commit('editAddress',content)
  }else{
    store.commit('addAddress',content)
  }

  Toast('保存成功')
  router.back()
}

const onDelete = (content) => {
  store.commit('deleteAddress',content)
  Toast('删除成功')
  router.back()
}

onMounted(() => {
  init()
})
</script>

<style lang="less" scoped>
/deep/ .van-button--danger {
  background-color: #ffc400;
  border-color: #ffc400;
}
/deep/ .van-switch--on {
  background-color: #ffc400;
}
</style>